<template>
    <div>
        <el-tabs
            v-model="mainTabs.editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
        >
            <el-tab-pane
                v-for="(item, index) in mainTabs.editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
                <component :is="item.panelComponent" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";

export default {
    computed: {
        ...mapGetters(["mainTabs"])
    },
    methods: {
        removeTab(targetName) {
            store.dispatch("RemoveMainTab", { targetName: targetName });
        }
    }
};
</script>

<style model>
.el-tabs__item {
    height: 30px;
    line-height: 30px;
}
.el-table td,
.el-table th {
    padding: 4px 0;
}

.el-card__header {
    padding: 8px 20px;
}

.el-card__body {
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 10px;
    padding-left: 15px;
}
</style>
